<template>
    <a-modal
            :title="title"
            width="60%"
            :visible="visible"
            switchFullscreen
            @cancel="handleCancel"
            class="printData"
            :dialog-style="{ top: '5px'}"
    >

        <template slot="footer">
            <a-button key="back" @click="handleCancel">
                关闭
            </a-button>
            <a-button type="primary" v-print="'#printContent'">
                打印
            </a-button>
        </template>

        <div class="text-white extra-item" v-if="showCodeInfo" >
            <a
                class="box1-item"
                v-for="(item, index) in menu"
                :class="{ 'red-link':index === isActive }"
                v-on:click.stop.prevent='switchTab(index)'>
                {{ item }}
            </a>
        </div>


        <div v-if="itemData" style="background: #f5f5f5;">
            <div class="qrCode" ref="qrCodeUrl" style="display: none;"></div>
            <section ref="print" id="printContent" class="abcdefg">
                <img src="@assets/img/back/zheng1.png" style="width: 100%;"/>
                <div style="position: absolute;top: 12%;width: 74%;">
                    <div class="print-header" >
                        <div class="print-title" style="text-align: center;">医疗废物信息化管理采集证</div>
                        <div style="color: #577449 !important;font-weight: bolder;font-size: 14px;margin-top: 10px;" >(版本2.0)</div>
                        <img src="@assets/img/back/zheng-header.png" style="width: 90%;margin-top: -14%;"/>
                    </div>
                    <!--签字-->
                    <div  style="display: flex;justify-content: flex-end;align-items: flex-end;">
                        <a-col :span="16">
                            <div class="sign" style="text-align: left;height: inherit">
                                <a-col :span="24">
                                <span class="print-name">
                                    单位名称：
                                </span>
                                    <span class="print-value">
                                    {{itemData.customerName || ''}}
                                </span>
                                </a-col>
                                <a-col :span="24" style="margin-top: 20px">
                                <span class="print-name" style="letter-spacing: 0px;">
                                    医废负责人：
                                </span>
                                    <span class="print-value">
                                    {{itemData.leadername || ''}}
                                </span>
                                </a-col>
                                <a-col :span="24" style="margin-top: 20px">
                                <span class="print-name">
                                    经营地址：
                                </span>
                                    <span class="print-value">
                                    {{itemData.province || ''}}{{itemData.city || ''}}{{itemData.area || ''}}{{itemData.address || ''}}
                                </span>
                                </a-col>
                                <a-col :span="24" style="margin-top: 20px">
                                <span class="print-name">
                                    机构类型：
                                </span>
                                    <span class="print-value">
                                    {{$config.getOrgLevel(itemData.organizationLevel)['label']}}
                                </span>
                                </a-col>
                                <a-col :span="24" style="margin-top: 20px">
                                <span class="print-name">
                                    监管类别：
                                </span>
                                    <span class="print-value">
                                    {{$config.getOrgSupervise(itemData.organizationSupervise)['label']}}
                                </span>
                                </a-col>
                            </div>
                        </a-col>
                        <a-col :span="8" style="text-align: right;display: flex;justify-content: flex-end;align-items: flex-end;">
                            <div style="margin-right: 30px;display: flex;flex-direction: column;align-items: center;justify-content: center;" >
                                <div style="width: 85px;height: 85px;border: 0.5px solid #888;display: flex;justify-content: center;align-items: center;border-radius: 50%" >
                                    <img src="@assets/img/back/jia.png" style="width: 50%;"/>
                                </div>
                                <div class="print-text" style="margin-top: 40px; letter-spacing: 6px;width: 100%;">RFID识别区</div>
                            </div>
                            <span class="sign" style="text-align: left;">
                                <img :src="qrcodeImgUrl" alt="" style="width: 160px;height: 160px;"/>
                                <div class="print-text" style="margin-top: 5px;width: 160px;word-break: break-all;white-space: normal;">机构码：{{isActive == 0 ? itemData.customerNumber : itemData.bnkMunicipalId  || '--'}}</div>
                            </span>
                        </a-col>
                    </div>
                    <a-col :span="24" style="margin-top: 20px;">
                        <div class="sign" style="text-align: left;height: inherit">
                            <span class="print-name">证书说明：</span>
                            <span class="print-value">
                                为全面贯彻落实贵州省《关于加快推进全省医疗废物可追溯信息化管理工作的通知（黔环综合[2021]20号）》及各地政策法律法规要求，特制作此证，用于贵州省固体废物管理平台医疗废物数据采集及监管工作。
                            </span>
                        </div>
                    </a-col>
                    <a-col :span="24" style="margin-top: 20px;">
                        <div style="display: flex;justify-content: space-between; align-items: center;width: 100%;">
                            <div class="print-name" style="letter-spacing: 2px;">发证日期：{{new Date().Format('yyyy年MM月dd日')}}
                            </div>
                            <div class="zhang">
                                <img src="@assets/img/back/zhang.png"
                                     style="width: 220px;position: absolute;opacity: 0.6;top: -100%;margin-top: -5%;"/>
                                <div class="print-name" style="letter-spacing: 2px;">贵州鸿创信息科技有限公司制</div>
                            </div>
                        </div>
                    </a-col>

                </div>
            </section>
        </div>
    </a-modal>
</template>

<script>
    import QRCode from 'qrcodejs2'

    export default {
        data() {
            return {
                itemData: null,
                qrcodeImgUrl: '',
                title: '打印《医疗废物信息登记证》',
                isActive: 0,
                menu: ['省固废编码登记证', '市固废编码登记证'],
                visible: false,
                disableSubmit: false
            }
        },
        computed:{
            // 是否显示省/市固废编码信息的筛选条件
            showCodeInfo(){
                let state = false;
                let itemData = this.itemData
                // 贵阳市的既有省固废编号也有市固废编号
                if(itemData.cityCode && itemData.cityCode == '520100'){
                    state = true;
                }
                return state;
            },
        },

        methods: {
            // 机构省固废信息
            creatQrCode(item) {
                this.visible = true
                this.itemData = item
                console.log('itemData',this.itemData)
                setTimeout(() => {
                    let ref = this.$refs.qrCodeUrl
                    if (ref) {
                        let dom = document.getElementsByClassName('qrCode')
                        if (dom && dom[0]) {
                            dom[0].innerHTML = ''
                        }
                        // let text = `${item.customerName}|${item.customerNumber}`;
                        let text = encodeURI(`bnkhospital_${item.customerNumber}_${item.customerName}`)
                        new QRCode(ref, {
                            text, // 需要转换为二维码的内容
                            // width: 200,
                            // height: 200,
                            colorDark: '#000000',
                            colorLight: '#ffffff',
                            correctLevel: QRCode.CorrectLevel.H
                        })
                        setTimeout(() => {
                            let item = document.getElementsByClassName('qrCode')[0].getElementsByTagName('img')[0]
                            if (item) {
                                this.qrcodeImgUrl = item.currentSrc
                            }
                        }, 500)

                    }
                }, 500)

            },
            // 机构市固废信息
            creatCityQrCode(item) {
                this.visible = true
                this.itemData = item
                console.log('itemData',this.itemData)
                setTimeout(() => {
                    let ref = this.$refs.qrCodeUrl
                    if (ref) {
                        let dom = document.getElementsByClassName('qrCode')
                        if (dom && dom[0]) {
                            dom[0].innerHTML = ''
                        }
                        let text = encodeURI(`bnkhospital_${item.bnkMunicipalId}_${item.customerName}`)
                        new QRCode(ref, {
                            text, // 需要转换为二维码的内容
                            // width: 200,
                            // height: 200,
                            colorDark: '#000000',
                            colorLight: '#ffffff',
                            correctLevel: QRCode.CorrectLevel.H
                        })
                        setTimeout(() => {
                            let item = document.getElementsByClassName('qrCode')[0].getElementsByTagName('img')[0]
                            if (item) {
                                this.qrcodeImgUrl = item.currentSrc
                            }
                        }, 500)
                    }
                }, 500)

            },
            handleCancel() {
                this.$emit('close')
                this.visible = false
                this.isActive = 0
            },
            // a标签改变的方法
            switchTab: function(index) {
                this.isActive = index;
                if(index == 0){
                    this.creatQrCode(this.itemData)
                }else if(index == 1){
                    this.creatCityQrCode(this.itemData)
                }
            },
        }
    }
</script>

<style lang="less" scoped>
    .extra-item {
        display: inline-block;
        margin: 5px 5px 20px;
        .box1-item{
            border: 1px #FFFFFF solid;
        }
        a {
            margin-left: 20px;
            font-size: 15px;
            padding: 10px;
        }
        .red-link {
            color: #4AC347;
        }
    }
    .bg-theme15{
        .box1-item{
            border: 1px #cccccc solid;
        }

        .red-link {
            background: #577449;
            color: #FFFFFF;
        }
    }

    @media print {
        html,
        body {
            height: inherit;
        }
    }

    /*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */
    .abcdefg {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .abcdefg .ant-card-body {
        margin: 0;
        border: none;
        min-width: 800px;
        color: #000000 !important;
    }

    .ant-card-body {
        padding: 0;
    }

    .print-header{
        /*background-image: url(~@assets/img/back/zheng-header.png);*/
        /*background-size: contain;*/
        /*background-repeat: no-repeat;*/
        color: #577449 !important;
        letter-spacing: 2px;
        text-align: center;
    }

    .print-title {
        font-size: 42px;
        font-weight: 800;
        color: #577449 !important;
        letter-spacing: 8px;
        font-family: 'Source Han Serif CN';
    }

    .print-name {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 4.8px;
        color: #1A1311;
    }

    .print-value {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .print-address {
        font-size: 18px;
        font-weight: 600;
        padding-right: 10%;
        letter-spacing: 4px;
        color: #1A1311;
    }

    .print-text {
        font-size: 14px;
        white-space: nowrap;
        color: #1A1311;
        width: 150px;
        word-break: break-word;
    }

    .print-type {
        position: absolute;
        top: 6%;
        right: 10%;
        font-size: 18px;
    }

    .explain {
        text-align: left;
        margin-left: 50px;
        color: #000000 !important;
    }

    .explain .ant-input, .sign .ant-input {
        font-weight: bolder;
        text-align: center;
        border-left-width: 0px !important;
        border-top-width: 0px !important;
        border-right-width: 0px !important;
    }

    .explain div {
        margin-bottom: 10px;
    }

    /* you can make up upload button and sample style by using stylesheets */
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>
